<template>
	<view class="container page-details">
		<!-- 轮播图 -->
		<view class="module-slide" ref="imgSwiper">
			<swiper
				class="swiper"
				:indicator-dots="indicatorDots"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
				@change="handleSwiper"
			>
				<swiper-item v-for="item in swiperList" :key="item.id">
					<view class="swiper-item">
						<!-- <image :src="img" mode="heightFix"></image> -->
					</view>
				</swiper-item>
			</swiper>
			<span class="swiper-tips">{{ curSwiper }}/{{ swiperList.length }}</span>
		</view>
		<!-- 轮播图 -->
		<view class="module-product">
			<view class="product-title">{{ resData.title }}</view>
			<view class="product-tips">{{ resData.tips }}</view>
			<view class="product-price">￥{{ resData.price }}</view>
		</view>
		<view class="item-cell" style="margin: 0 0 8px;">
			库存剩余
			<text class="cell-value">1233件</text>
		</view>
		<view class="item-cell">
			服务说明
			<text class="cell-value">
				 无忧退货  快速退款  免费包邮
			</text>
		</view>
		<view class="item-cell" @tap="handleOpenSku">
			选择规格
			<text class="cell-value">
				1kg/件
				<text class="iconfont iconjiantou"></text>
			</text>
		</view>
		<!-- <view class="item-cell">
			运费
			<text class="cell-value">包邮</text>
		</view> -->

		<view class="module module-shop">
			<view class="module-title">商家信息</view>
			<view class="module-shop-content">
				<image :src="storeImg" class="shop-logo"></image>
				<view class="shop-content">
					<view class="shop-name">微企生鲜集团</view>
					<view class="shop-tips">国际著名海鲜品牌</view>
					<view class="shop-product">
						100件商品
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="module">
			<view class="module-title">商品介绍</view>
			<view class="product-tips">
				三文鱼（Oncorhynchus），又名大马哈鱼、鲑鱼、撒蒙鱼，属硬骨鱼纲、鲑形目、鲑属，主要分布在大西洋与太平洋、北冰洋交界的水域，属于冷水性的高度洄游鱼类，被国际美食界誉为“冰海之皇”。研究表明，金枪鱼和三文鱼均肉质鲜美，营养丰富，并且富含EPA和DHA等生物活性物质。
			</view>
		</view>

		<view class="module module-info">
			<view class="module-title">商品参数</view>
			<view class="info-body">
				<view class="item">
					<text class="item-addon">产品品牌：</text>
					日本进口
				</view>
				<view class="item">
					<text class="item-addon">产品名称：</text>
					日本进口三文鱼
				</view>
				<view class="item">
					<text class="item-addon">颜色：</text>
					没有
				</view>
				<view class="item">
					<text class="item-addon">体积：</text>
					没有
				</view>
				<view class="item">
					<text class="item-addon">重量：</text>
					10k
				</view>
			</view>
		</view>
		<view class="module module-evaluate">
			<view class="module-title">商品评价</view>
			<view class="evaluate-body">
				<view class="evaluate-left">
					<view class="evaluate-left-content">
						<view class="point">4.5</view>
						综合评分
					</view>
				</view>
				<view class="evaluate-right">
					<view class="item">
						<span class="item-addon">服务态度</span>
						<uniRate
							disabled="true"
							value="3.5"
							active-color="#1ABC9C"
							color="#ddd"
							size="18"
							margin="4"
						></uniRate>
						<span class="point">3.5</span>
					</view>
					<view class="item">
						<span class="item-addon">商品评分</span>
						<uniRate
							disabled="true"
							value="3.5"
							active-color="#1ABC9C"
							color="#ddd"
							size="18"
							margin="4"
						></uniRate>
						<span class="point">3.5</span>
					</view>
					<view class="item">
						<span class="item-addon">物流评分</span>
						<uniRate
							disabled="true"
							value="3.5"
							active-color="#1ABC9C"
							color="#ddd"
							size="18"
							margin="4"
						></uniRate>
						<span class="point">3.5</span>
					</view>
				</view>
			</view>
			<view class="evaluate-list">
				<view class="media">
					<view class="avatar"></view>
					<view class="media-header">
						我要吃牛腿肉
						<view class="date">2020.03.17 15：55</view>
					</view>
					<view class="media-content">吃的很好，物流快，服务态度不错</view>
				</view>
			</view>
		</view>
		<!-- sku选择弹窗组件 -->
		<uniPopup ref="popupSku" type="bottom" class="popup-sku">
			<popupSku
				:list="skuList"
				:selectArr="selectArr"
				:productInfo="resData"
				@addCart="handleAddCart"
			></popupSku>
		</uniPopup>
		<!-- sku选择弹窗组件 -->

		<!-- 底部菜单组件 -->
		<goodsNav
			class="fixed-bottom"
			:options="navGroup"
			:button-group="buttonGroup"
			@click="handleNavLeft"
			@buttonClick="handleNavRight"
		></goodsNav>
		<!-- 底部菜单组件 -->
		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9-->
		<flyInCart ref="carAnmation" cartx="0.25" carty="1.1"></flyInCart>
	</view>
</template>

<script>
// 引入组件
import popupSku from '@/pages/components/popup-sku/popup-sku.vue';
import goodsNav from '@/pages/components/goods-nav/goods-nav.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import flyInCart from '@/components/fly-in-cart/fly-in-cart.vue';
export default {
	components: {
		// 声明组件
		popupSku,
		goodsNav,
		uniPopup,
		uniRate,
		flyInCart,
	},
	data() {
		return {
			storeImg: '../../../static/img/img_store.png',
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			curSwiper: 1,
			swiperList: [
				{
					id: '1',
				},
				{
					id: '2',
				},
				{
					id: '3',
				},
			],
			selectArr: [],
			skuList: [
				{
					name: '颜色',
					muster: [
						{
							parentId: 2,
							name: '白色',
							count: 6,
						},
						{
							parentId: 2,
							name: '黑色',
							count: 10,
						},
						{
							parentId: 2,
							name: '绿色',
							count: 20,
						},
					],
				},
				{
					name: '码数',
					muster: [
						{
							parentId: 3,
							name: 'X',
							count: 10,
						},
						{
							parentId: 3,
							name: 'L',
							count: 10,
						},
						{
							parentId: 3,
							name: 'XL',
							count: 10,
						},
					],
				},
			],
			specClass: '',
			navGroup: [
				{
					icon: 'iconbangwozhaopuiconzhong',
					text: '联系商家',
				},
				{
					icon: 'icongouwuche',
					text: '购物车',
					info: '',
				},
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#1ABC9C',
					color: '#fff',
				},
				{
					text: '立即购买',
					backgroundColor: '#FFA847',
					color: '#fff',
				},
			],
			resData: {
				title: '日本新鲜进口三文鱼',
				price: 80,
				thumb: '',
				count: 1,
				tips: '当天送达',
				id: 1,
				shop: '广州市直营店',
				shopid: 6,
			},
		};
	},
	computed: {
		allTotal() {
			return this.$store.getters.allTotal;
		},
	},
	onLoad(options) {
		// 上个页面传递的数据

		this.navGroup[1].info = this.allTotal.productNum;
		setTimeout(() => {
			this.selectArr = [
				{
					parentId: 2,
					name: '白色',
					count: 10,
				},
				{
					parentId: 3,
					name: 'X',
					count: 10,
				},
			];
			this.skuList.map((item) => {
				item.muster.map((itemMuster) => {
					this.$set(itemMuster, 'isActive', false);
					this.selectArr.map((itemSelect) => {
						if (itemSelect.name === itemMuster.name) {
							itemMuster.isActive = true;
						}
					});
				});
			});
		}, 1000);
	},
	methods: {
		handleAddCart(data) {
			// 成功的话，调用加入购物车动画
			setTimeout(() => {
				this.$refs.carAnmation.touchOnGoods(data, '185', '135');
			}, 10);
			this.navGroup[1].info = this.allTotal.productNum;
			this.$refs.popupSku.close();
		},

		// 图片滑动
		handleSwiper(e) {
			this.curSwiper = e.detail.current + 1;
		},
		// 点击底部导航左侧
		handleNavLeft(e) {
			if (e.index === 1) {
				uni.switchTab({
					url: '../../shopcart/index',
				});
			}
		},
		// 点击底部导航右侧
		handleNavRight(e) {
			this.$refs.popupSku.open();
		},
		handleOpenSku() {
			this.$refs.popupSku.open();
		},
	},
};
</script>
<style lang="scss" scoped>
.page-details {
	background: $uni-bg-color-grey;
	padding: 0 0 110rpx;
	.module-slide {
		position: relative;
	}
	.swiper {
		height: 500rpx;
	}

	.swiper-item {
		height: 500rpx;
		background: #eee;
		text-align: center;
		image {
			height: 500rpx;
		}
	}

	.swiper-tips {
		position: absolute;
		bottom: 24rpx;
		right: 24rpx;
		background: #999;
		font-size: $uni-font-size-sm;
		padding: 4rpx $uni-spacing-base;
		color: $uni-text-color-white;
		border-radius: 40rpx;
	}

	.module-product {
		background: #fff;
		padding: 20rpx 0;
		text-align: center;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
		.product-title {
			font-size: 38rpx;
		}
		.product-tips {
			color: $uni-text-color-grey;
			line-height: 32rpx;
			margin: 0 0 $uni-spacing-sm;
		}

		.product-price {
			color: $uni-text-price;
			font-weight: bold;
			font-size: 38rpx;
		}
	}

	.item-cell {
		background: #fff;
		padding: $uni-spacing-base $uni-spacing-lg;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
		color: $uni-text-color-grey;

		.cell-value {
			float: right;
		}
	}

	.module {
		background: #fff;
		margin: $uni-spacing-base 0 0;
		padding: 20rpx;
	}

	.module-title {
		padding: 8rpx 0;
		text-align: center;
	}
	.module-shop-content {
		display: flex;
		width: 100%;
		align-items: center;
	}
	.shop-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: $uni-border-radius-circle;
	}
	.shop-content {
		flex: 1;
		position: relative;
		padding: $uni-spacing-sm 0 $uni-spacing-sm $uni-spacing-sm;
		color: $uni-text-color-grey;
	}

	.shop-product {
		position: absolute;
		top: 28rpx;
		right: 0;
		font-size: $uni-font-size-sm;
	}

	.shop-name {
		margin: 0 0 10rpx;
		color: #666;
	}
	.shop-tips {
		font-size: $uni-font-size-sm;
	}
	.product-tips {
		padding: $uni-spacing-sm 0;
		text-align: center;
		font-size: 26rpx;
		color: $uni-text-color-grey;
		line-height: 44rpx;
	}
}

.module-info {
	.item {
		padding: $uni-spacing-sm 0;
		color: $uni-text-color-grey;
	}

	.item-addon {
		color: $uni-text-color;
		width: 160rpx;
		display: inline-block;
	}
}

.module-evaluate {
	.evaluate-body {
		background: #fff;
		margin: 0 0 $uni-spacing-base;
		padding: $uni-spacing-base 0;
		display: flex;
	}

	.evaluate-left {
		width: 200rpx;
		display: flex;
		align-items: center;
	}

	.evaluate-left-content {
		text-align: center;
		flex: 1;
		@include borderCreator(right, solid, $uni-border-color-grey);
	}

	.point {
		color: $uni-text-price;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 46rpx;
	}

	.evaluate-right {
		flex: 1;
		padding-left: 36px;
		.point {
			margin-left: $uni-spacing-sm;
			font-size: $uni-font-size-base;
		}
	}

	.item {
		display: flex;
		align-items: center;
	}

	.item-addon {
		font-size: $uni-font-size-sm;
		margin-right: $uni-spacing-base;
	}

	.evaluate-list {
		display: block;
	}

	.media {
		position: relative;
		padding-left: 120rpx;
	}

	.avatar {
		background: #ccc;
		position: absolute;
		top: 0;
		left: 10rpx;
		width: 86rpx;
		height: 86rpx;
		border-radius: $uni-border-radius-circle;
	}

	.media-header {
		padding: 0 0 8rpx;
		margin: 0 0 10rpx;
		@include borderCreator(bottom, solid, $uni-border-color-grey);

		.date {
			float: right;
			font-size: 20rpx;
			color: $uni-text-color-grey;
		}
	}

	.media-content {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
}
</style>
